<template>
  <div class="allsingleItem">
    <div v-for="item in market" :key="item.id">
      <div class="singleItem flex flex-between">
        <img class="mainImg" :src=item.img>
        <div class="center flex flex-column">
          <p class="title">{{ item.title }}</p>
          <div class="flex">
            <div class="icon" v-for="(icon,index) in item.icon" :key="index">
              <img class="blue" :src=icon>
            </div>
          </div>
          <div class="flex">
            <p class="price">{{ item.money }}</p>
            <p class="oldPrice marginAuto0">原价{{ item.oldmoney }}元</p>
          </div>
        </div>
        <div class="right flex flex-column flex-around textAlignCenter">
          <div>
            <p>剩余:{{ item.have }}</p>
            <van-progress :percentage=item.have*100/item.all :show-pivot="false" stroke-width=".1rem"/>
          </div>
          <button v-if="isBtn" @click="goDetail(item.id)">立即兑换</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Progress} from 'vant';


Vue.use(Progress);
export default {
  name: "singleItem",
  props: {
    market: {
      type: Array,
      default() {
        return [
          {
            id: "test001",
            img: require("@/assets/logo.png"),
            title: "Title",
            icon: [require("@/assets/img/home/marketIcon1.png"), require("@/assets/img/home/marketIcon2.png"),
              require("@/assets/img/home/marketIcon3.png"), require("@/assets/img/home/marketIcon4.png"),],
            money: 0, oldmoney: 0,
            have: 0, all: 500
          }
        ]
      }
    },
    isBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    goDetail(id) {
      this.$router.push("/marketDetail?id=" + id)
    }
  }
}
</script>

<style scoped>
.allsingleItem {
  margin-top: .32rem;
}

.singleItem {
  background: url("../../assets/img/home/single.png");
  background-size: cover;
  width: 9.09rem;
  height: 2.6rem;
  margin: 0 auto;
}

.mainImg {
  width: 1.12rem;
  height: 1.12rem;
  margin: auto 0 auto .7rem;
}

.center {
  margin-top: .3rem;
  margin-left: -.5rem;
}

.title {
  font-size: 0.37rem;
  font-weight: 400;
  color: #333333;
}

.icon img {
  width: .37rem;
  height: .37rem;
  margin-right: .05rem;
}

.price {
  font-size: .53rem;
  font-weight: 500;
  color: #FF6A51;
  margin-right: .5rem;
}

.price::before {
  content: "￥";
  font-size: .4rem;
}

.oldPrice {
  font-size: 0.27rem;
  font-weight: 400;
  color: #999999;
  text-decoration: line-through;
}

.right {
  margin: .4rem .5rem .51rem 0;
}

.right p {
  font-size: 0.27rem;
  font-weight: 400;
  color: #B6B6B6;
}

.right button {
  border: none;
  background: linear-gradient(33deg, #2D96FF 0%, #74BAFF 100%);
  border-radius: 0.75rem;
  font-size: 0.32rem;
  font-weight: 400;
  color: #FFFFFF;
  padding: .05rem .24rem;
  outline: none;
}
</style>